@import url("https://fonts.googleapis.com/css?family=Montserrat");

* {
  /* 盒子大小不包括外边距 */
  box-sizing: border-box;
}

body {
  /* 背景颜色 */
  background-color: #f4f4f4;
  /* 字体 */
  font-family: "Montserrat", sans-serif;
  /* 弹性盒子 */
  display: flex;
  /* 按y轴排列 */
  flex-direction: column;
  /* x轴居中 */
  align-items: center;
  /* y轴居中 */
  justify-content: center;
  /* 高 */
  height: 100vh;
  /* 溢出隐藏 */
  overflow: hidden;
  /* 外边距 */
  margin: 0;
  /* 内边距 */
  padding: 10px;
}

.testimonial-container {
  /* 背景颜色 */
  background-color: #476ce4;
  /* 字体颜色 */
  color: #fff;
  /* 圆角 */
  border-radius: 15px;
  /* 外边距 */
  margin: 20px auto;
  /* 内边距 */
  padding: 50px 80px;
  /* 最大宽度 */
  max-width: 768px;
  /* 相对定位 */
  position: relative;
}
.fa-quote {
  /* 字体颜色 */
  color: rgba(255, 255, 255, 0.3);
  /* 字体大小 */
  font-size: 28px;
  /* 绝对定位 */
  position: absolute;
  top: 70px;
}
.fa-quote-right {
  left: 40px;
}
.fa-quote-left {
  right: 40px;
}
.testimonial {
  /* 行高 */
  line-height: 28px;
  /* 文字向两侧对齐，对最后一行无效 */
  text-align: justify;
}
.user {
  /* 弹性盒子 */
  display: flex;
  /* x轴居中 */
  align-items: center;
  /* y轴居中 */
  justify-content: center;
}
.user .user-image {
  /* 圆角 */
  border-radius: 50%;
  /* 高 */
  height: 75px;
  /* 宽 */
  width: 75px;
  /* 指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框 */
  object-fit: cover;
}
.user .user-details {
  /* 左外边距 */
  margin-left: 10px;
}
.user .username {
  /* 外边距 */
  margin: 0;
}
.user .role {
  /* 字体粗细 */
  font-weight: normal;
  /* 外边距 */
  margin: 10px 0;
}
.progress-bar {
  /* 背景颜色 */
  background-color: #fff;
  /* 高 */
  height: 4px;
  /* 宽 */
  width: 100%;
  /* 做动作 */
  animation: grow 10s linear infinite;
  /* 更改一个元素变形的原点。 */
  transform-origin: left;
}
/* 动作 */
@keyframes grow {
  0% {
    /* 缩放 */
    transform: scaleX(0);
  }
}
@media (max-width: 768px) {
  .testimonial-container {
    /* 内边距 */
    padding: 20px 30px;
  }

  .fa-quote {
    /* 隐藏 */
    display: none;
  }
}
